<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>电影票管理系统 - 登录</title>
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/macos-style.css" rel="stylesheet">
</head>
<body>
    <div class="macos-window login-container macos-animate-fade-in">
        <div class="macos-titlebar">
            <div class="macos-buttons">
                <div class="macos-button macos-close"></div>
                <div class="macos-button macos-minimize"></div>
                <div class="macos-button macos-maximize"></div>
            </div>
            <div class="macos-title">登录</div>
            <div style="width: 50px;"></div> <!-- 平衡标题栏 -->
        </div>
        <div class="macos-content">
            <h2 class="text-center mb-4">电影票管理系统</h2>
            <form id="loginForm">
                <input type="text" class="macos-input" id="username" placeholder="用户名">
                <input type="password" class="macos-input" id="password" placeholder="密码">
                <button type="button" class="macos-button-primary" onclick="login()">登录</button>
                <button type="button" class="macos-button-secondary" onclick="showRegister()">注册</button>
            </form>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script>
        function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            fetch('/user/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({username, password})
            })
            .then(response => response.text())
            .then(result => {
                if (result === 'ADMIN') {
                    animateTransition(() => {
                        window.location.href = '/admin.html';
                    });
                } else if (result === 'USER') {
                    animateTransition(() => {
                        window.location.href = '/user.html';
                    });
                } else {
                    showError('用户名或密码错误');
                }
            });
        }

        function showRegister() {
            animateTransition(() => {
                window.location.href = '/register.html';
            });
        }

        function animateTransition(callback) {
            gsap.to(".login-container", {
                duration: 0.5,
                opacity: 0,
                y: -50,
                ease: "power2.inOut",
                onComplete: callback
            });
        }

        function showError(message) {
            // 创建错误提示元素
            const errorDiv = document.createElement('div');
            errorDiv.className = 'alert alert-danger macos-animate-fade-in';
            errorDiv.style.borderRadius = '8px';
            errorDiv.style.marginBottom = '16px';
            errorDiv.textContent = message;
            
            // 插入到表单前面
            const form = document.getElementById('loginForm');
            form.parentNode.insertBefore(errorDiv, form);
            
            // 3秒后自动消失
            setTimeout(() => {
                gsap.to(errorDiv, {
                    duration: 0.5,
                    opacity: 0,
                    height: 0,
                    marginBottom: 0,
                    padding: 0,
                    onComplete: () => errorDiv.remove()
                });
            }, 3000);
        }

        // 页面加载动画
        document.addEventListener('DOMContentLoaded', () => {
            gsap.from(".macos-window", {
                duration: 0.8,
                y: 30,
                opacity: 0,
                ease: "elastic.out(1, 0.8)"
            });
        });

        // 添加键盘事件
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                login();
            }
        });

        // 添加窗口按钮效果
        document.querySelector('.macos-close').addEventListener('click', () => {
            gsap.to(".macos-window", {
                duration: 0.3,
                scale: 0.9,
                opacity: 0,
                ease: "power2.in"
            });
        });
    </script>
</body>
</html>